<template>
	<div class="wrap">
		<div class="essential-box">
			<div class="pay-title">30天内服务店铺（top10）</div>
			<el-row :gutter="15" class="px_30 py_20">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-table :data="service_history_one_month">
                        <el-table-column type="index" label="序号" width="100px"></el-table-column>
                        <el-table-column prop="shop_name" label="店铺名称" align="center"> </el-table-column>
                        <el-table-column prop="task_num" label="服务次数" align="center"> </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
			<div class="pay-title">1年内服务店铺（top20）</div>
            <el-row :gutter="15" class="px_30 py_20">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-table :data="service_history_one_year">
                        <el-table-column type="index" label="序号" width="100px"></el-table-column>
                        <el-table-column prop="shop_name" label="店铺名称" align="center"> </el-table-column>
                        <el-table-column prop="task_num" label="服务次数" align="center"> </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
		</div>
	</div>
</template>

<script>
export default {
	name: 'ServiceShops',
	props: {
		userInfo: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
            service_history_one_month: [],
            service_history_one_year: []

		}
	},
	async mounted() {
        this.setValue()
    },
    watch: {
        userInfo() {
            this.setValue()
        }
    },
    methods: {
        setValue() {
            this.service_history_one_month = this.userInfo.service_history_one_month
            this.service_history_one_year = this.userInfo.service_history_one_year
        }
    }
}
</script>

<style scoped lang="scss">
.essential-box {
	margin-bottom: 30px;
}
.pay-title {
	color: #222222;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 10px;
	border-bottom: 1px solid #ebebeb;
}
.tableHeight{
    box-sizing: border-box;
}
</style>



// WEBPACK FOOTER //
// src/components/staff/components/ServiceShops.vue